import React from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Image,
    FlatList,
    ImageBackground
}from 'react-native'
import ControlPage from './ControlPage'
import BasePage from '../BasePage'
import NavigationBar from 'teaset/components/NavigationBar/NavigationBar';
import zhuwo from '../images/room/主卧.jpg'
import ciwo from '../images/room/次卧.jpg'
import chufang from '../images/room/厨房.jpg'
import weishengjian from '../images/room/卫生间.jpg'
import keting from '../images/room/客厅.jpg'
import moren from '../images/room/默认.jpg'
import PageView from '../Component/Common/PageView';
import EventStore from './EventStore';
import SubRoomPage from './SubRoomPage'
var imageArr=[zhuwo,ciwo,keting,chufang,weishengjian,moren];

export default class RoomPage extends BasePage{
    renderNavigationBar() {
        return (
            <NavigationBar
                title={'房间'}
                backgroundColor='#555555'
            />
        );
    }
    renderPage(){
        return (
            <View style={{flex:1,backgroundColor:'#C7C7C7'}}>
                <FlatList
                    data={[{roomName:'主卧',key:'1'},{roomName:'次卧',key:'2'},{roomName:'客厅',key:'3'},{roomName:'厨房',key:'4'},{roomName:'卫生间',key:'5'},{roomName:'默认',key:'6'}]}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        );
    }
    _renderItem=({index,item})=>{
        return (
                <TouchableOpacity style={{marginLeft:10,marginRight:10 ,marginTop:10,height:200,}} onPress={()=>{
                this.navigator.push({view:<SubRoomPage/> });
            }}>
                <ImageBackground style={{ flex:1 }} source={imageArr[index]}  >
                    <Text style={{marginTop:20,marginLeft:20, width:80, height:22, backgroundColor:'#666666',color:'white', textAlign:'center',padding:3 ,borderRadius:10 }}>
                    {item.roomName}
                    </Text>  
                </ImageBackground>
            </TouchableOpacity>
        );
    }
    _keyExtractor=(index,item)=>{
        return index;
    }

}
